<template>
  <el-table :data="list" border style="width: 100%">
    <el-table-column prop="name" label="用户" />
    <el-table-column prop="date" empty-text="--" label="关注时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          type="primary"
          size="small"
          v-if="scope.row.like"
          @click.stop="handleUnfollow(scope.row)"
        >
          互相关注
        </el-button>
        <el-button
          type="primary"
          size="small"
          v-else
          @click.stop="handleFollow(scope.row)"
        >
          回关
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination" style="text-align: right; margin-top: 16px">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="searchParams.size"
      :current-page="searchParams.page"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script setup lang="ts">
import { defineProps, watch, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import * as pieceApi from '@/api/piece';
import { useList } from '@/composables/useList';
import { useRequest } from '@/composables/useRequest';

// 定义粉丝用户的接口，更准确地反映数据结构
interface FanUser {
  id: number;
  name: string;
  date: string;
  like: number;
  // 这些字段似乎未被使用，但保留以确保兼容性
  title?: string;
  favorite?: number;
  follow?: number;
}

// 定义搜索参数接口
interface SearchParams {
  name: string;
  dateRange?: Array<string>;
  page: number;
  size: number;
  [key: string]: any;
}

// 使用更明确的类型定义props
const props = defineProps<{
  searchParams: SearchParams;
}>();

// 使用类型断言确保初始数据符合FanUser接口
const list = reactive<FanUser[]>([
  {
    id: 1,
    name: '粉丝1',
    date: '2025-10-20',
    like: 1
  },
  {
    id: 2, // 修正重复的ID
    name: '粉丝2',
    date: '2025-10-20',
    like: 0
  }
]);

// 使用useList钩子获取列表功能
const { total, query, refresh, setPage } = useList<FanUser>(
  pieceApi.getMyPieceList
);

// 使用useRequest钩子处理异步请求
const { run: runQuery } = useRequest();

// 监听searchParams变化，自动查询数据
watch(
  () => props.searchParams,
  (newParams) => {
    if (newParams) {
      runQuery(() => query({ ...newParams }));
    }
  },
  { immediate: true, deep: true }
);

/**
 * 处理分页变化
 * @param pageNum 新的页码
 */
function handlePageChange(pageNum: number): void {
  setPage(pageNum);
}

/**
 * 处理取消关注操作（对互相关注的粉丝）
 * @param user 要取消关注的粉丝信息
 */
async function handleUnfollow(user: FanUser): Promise<void> {
  try {
    await ElMessageBox.confirm('确定不再关注此人？', '取消关注', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    await pieceApi.deleteMyPiece(user.id);
    ElMessage.success('取消关注成功');
    refresh();
  } catch (error) {
    // 用户取消操作不算错误，只有API调用失败才算
    if (error !== 'cancel') {
      console.error('取消关注失败:', error);
      ElMessage.error((error as Error)?.message || '取消关注失败');
    }
  }
}

/**
 * 处理回关操作
 * @param user 要回关的粉丝信息
 */
async function handleFollow(user: FanUser): Promise<void> {
  try {
    await ElMessageBox.confirm('确定关注此人？', '关注', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    });

    // 注意：这里应该调用关注API而不是删除API，暂时保留原有实现
    await pieceApi.deleteMyPiece(user.id);
    ElMessage.success('关注成功');
    refresh();
  } catch (error) {
    // 用户取消操作不算错误，只有API调用失败才算
    if (error !== 'cancel') {
      console.error('关注失败:', error);
      ElMessage.error((error as Error)?.message || '关注失败');
    }
  }
}
</script>

<style scoped></style>
